<template>
  <div class>
    <el-card>
      <div class="head">
        <div class="left">
          选择年份：
          <el-select v-model="year" @change="selectYearChange" placeholder="请选择">
            <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div class="right">
          <div class="item">
            <div class="label">工作日</div>
            <div class="box"></div>
          </div>
          <div class="item">
            <div class="label">非工作日</div>
            <div class="box" style="background:#999;"></div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="content">
      <div class="box" v-for="(item,key) in 12" :key="key">
        <calendar
          ref="calendar"
          @setActive="setActive"
          @getItem="getItem"
          :showBtn="false"
          :year="year"
          :list="noWorkingList "
          :month="item-1"
        ></calendar>
      </div>
    </div>
    <el-dialog :title="selectData.value" :visible.sync="dialogVisible" width="240px">
      <span>
        <el-switch v-model="working" active-text="工作日"></el-switch>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import calendar from "@/components/calendar/calendar";
import { getNoworkingList, addNoworkingList, delNoWorking } from "./function";
export default {
  components: { calendar },
  data() {
    return {
      options: [
        new Date().getFullYear() - 1,
        new Date().getFullYear(),
        new Date().getFullYear() + 1,
        new Date().getFullYear() + 2
      ],
      dialogVisible: false,
      year: new Date().getFullYear(),
      selectData: {},
      working: false,
      noWorkingList: []
    };
  },
  computed: {},
  mounted() {
    this.getNoworkingList();
  },
  methods: {
    selectYearChange() {
      this.getNoworkingList();
    },
    getNoworkingList() {
      let params = { year: this.year };
      getNoworkingList(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.noWorkingList = [];
          this.noWorkingList = res.retBody;
        }
      });
    },
    ok() {
      this.dialogVisible = false;
      if (!this.working) {
        this.addNoWorking();
      } else {
        this.delNoWorking();
      }
    },
    addNoWorking() {
      let params = {
        value: this.selectData.value
      };
      addNoworkingList(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.getNoworkingList();
          this.$message.success("操作成功！");
        }
      });
    },
    delNoWorking() {
      let params = {
        value: this.selectData.value
      };
      delNoWorking(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.getNoworkingList();
          this.$message.success("操作成功！");
        }
      });
    },
    setActive(v) {
      for (let index = 0; index < 12; index++) {
        this.$refs.calendar[index].clearAllActive(v.value);
      }
    },
    getItem(v) {
      this.dialogVisible = true;
      this.selectData = v;
      this.working = v.params.working;
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .box {
    width: 33%;
    min-height: 240px;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 6px;
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 4px;
  }
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    display: flex;
    .item {
      display: flex;
      margin-right: 30px;
      .label{
        margin-right: 10px;
      }
      .box {
        width: 30px;
        height: 20px;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>